<template>
  <div>
    <el-container>
      <!--      <el-header style="margin-bottom: 20px">-->
      <!--&lt;!&ndash;        <label style="color: darkturquoise;font-weight: bolder;font-size: xxx-large">商家订单列表</label>&ndash;&gt;-->
      <!--      </el-header>-->
    </el-container>
    <!--      <el-button @click="resetDateFilter">清除日期过滤器</el-button>-->
    <!--      <el-button @click="clearFilter">清除所有过滤器</el-button>-->
    <el-card>
      <h1 style="margin: 0 auto;text-align: center;color: #6ECAE1">订单记录</h1>
      <el-table border ref="filterTable" :data="tableData" style="width: 100%">
        <el-table-column prop="createTime" label="购买日期" sortable width="250" column-key="date">
        </el-table-column>
        <el-table-column prop="buyUserName" label="购买人" width="180"></el-table-column>
<!--        <el-table-column prop="checkUserName" label="审核人" width="180"></el-table-column>-->
        <el-table-column prop="price" label="价格" width="250"></el-table-column>
        <el-table-column prop="phone" label="电话" width="250"></el-table-column>
        <el-table-column prop="status" label="操作" width="250"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <!--            <el-button style="margin-right: 10px" type="primary" size="mini"-->
            <!--                       @click="deleteOrder(scope.row)">取消订单</el-button>-->
            <el-button style="margin-left:10px" slot="reference"
                       class="detailBtn" type="success"
                       @click="getOrderDetail(scope.row)"
                       size="mini">查看订单详情111
            </el-button>
<!--无效代码-->
<!--            <el-popconfirm @confirm="cancelTicket(scope.row)" title="确定要取消订单么？">-->
<!--              <el-button  v-if="scope.row.cancel===0" style="margin-left:10px" class="deleteBtn"-->
<!--                          type="danger"-->
<!--                          size="mini">取消订单-->
<!--              </el-button>-->
<!--            </el-popconfirm>-->

            <el-popconfirm @confirm="cancelTicket(scope.row)" title="确定要取消订单么？">
            <el-button v-if="scope.row.cancel===0" style="margin-left:10px" slot="reference" class="deleteBtn" type="danger"
                       size="mini">取消订单
            </el-button>
            </el-popconfirm>

            <el-button v-if="scope.row.cancel===1" style="margin-left:10px" slot="reference" class="deleteBtn"
                       type="primary"
                       size="mini">已取消订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <table>
        <thead>
        <tr>
          <th width="120">
            <el-checkbox :value="isAll" @change="allCheck"/>
          </th>
          <th width="400">商品信息</th>
          <th width="220">单价</th>
          <th width="180">数量</th>
          <th width="180">小计</th>
          <th width="140">操作</th>
        </tr>
        </thead>
        <!-- 商品列表 -->
        <tbody>
        <tr v-for="i in orderMedicineList" :key="i.attrsText">
          <td>
            <el-checkbox :value="i.selected" @change="(selected)=>singleCheck(i,selected)"/>
          </td>
          <td>
            <div class="goods">
              <router-link :to="`/detail/${i.id}`"><img :src="i.picture" alt="" /></router-link>
              <div>
                <p class="name ellipsis">
                  {{ i.name }}
                </p>
              </div>
            </div>
          </td>
          <td class="tc">
            <p>&yen;{{ i.price }}</p>
          </td>
          <td class="tc">
            <el-input-number v-model="i.count"  :min="1"/>
          </td>
          <td class="tc">
            <p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
          </td>
          <td class="tc">
            <p>
              <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delCart(i)">
                <template #reference>
                  <a href="javascript:;">删除</a>
                </template>
              </el-popconfirm>
            </p>
          </td>
        </tr>
        <tr v-if="orderMedicineList.length === 0">
          <td colspan="6">
            <div class="cart-none">
              <el-empty description="购物车列表为空">
                <el-button type="primary" @click="$router.push({path:'/'})">随便逛逛</el-button>
              </el-empty>
            </div>
          </td>
        </tr>
        </tbody>

      </table>
    </el-dialog>
    <el-row>
      <el-col :span="12" :offset="12">
        <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页" next-text="下一页"
                       :total="total" :page-size="pageSize" :current-page="pageNow" :page-sizes="[10, 20, 50]"
                       style="margin:15px 0px"
                       @current-change="findPage" @size-change="findSize">
        </el-pagination>
      </el-col>
    </el-row>
    <!--    &lt;!&ndash;      个人信息展示&ndash;&gt;-->
  </div>
</template>
<script>
export default {
  name: 'orderManagement',
  data() {
    return {
      pageNow: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      orderDetailShow: false,
      size: '',
      searchByType: 0,
      orderDetail: {
        user: 'medium'
      },
      centerDialogVisible: false,
      orderMedicineList: [],
    };
  },

  mounted() {
    this.getOrderList()
    // this.$bus.$on("getOrderList",this.refreshMsg)
  },
  beforeDestroy() {
    // this.$bus.$off("getOrderList")
  },

  methods: {
    getOrderDetail(row) {
      // console.info(row.id)
      this.centerDialogVisible = true;
      console.info(this.centerDialogVisible)
      this.$http.get("/order/" + row.id).then(res => {
        console.info(res.data.data)
        // this.getOrderList()
      });
    },

    cancelTicket(item) {
      // console.info("取消")
      // console.info(item)
      this.$http.put("/order/cancel/" + item.id).then(res => {
        this.$message({
          message: res.data.data,
          type: 'success'
        });
        this.getOrderList()
      });
    },


    deleteOrder(item) {
      console.info(item)
    },
    //改变页码数据量大小
    findSize(size) {
      this.pageSize = size
      this.getOrderList()
    },
    changeMsgStatus(mid) {
      this.$http.put("/order/status/" + mid).then(res => {
        // console.log(res.data)
      });
      this.getOrderList()
    },
    findPage(page) {
      this.pageNow = page
      this.getOrderList()

    },
    //获取订单列表
    getOrderList() {
      let uid = JSON.parse(window.sessionStorage.getItem("user")).id
      this.$http.get("/order/list/" + this.pageNow + "/" + this.pageSize + "/" + uid).then(res => {
        // console.log(res.data.data)
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },


    formatter(row, column) {
      return row.content;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },

};
</script>

<style lang='scss' scoped></style>
